import { FC, useCallback } from 'react';
import { Layout, Menu } from 'antd';
import { useRecoilState } from 'recoil';
import { useHistory } from 'react-router-dom';
import { collapsedSelector } from '@/recoil/selectors/collapsedSelector';
import menu from '@/models/menu';

import './index.scss';

const { SubMenu } = Menu;
const { Sider } = Layout;

const SideBar: FC<{}> = () => {
  const [collapsed, setCollapsed] = useRecoilState(collapsedSelector);
  const history = useHistory();

  const handleMenuItemClick = useCallback((path) => {
    history.push({ pathname: path });
  }, []);

  return (
    <Sider
      trigger={null}
      collapsible
      collapsed={collapsed}
      style={{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        zIndex: 1100
      }}>
      <div className='logo' />
      <Menu
        theme='dark'
        mode='inline'
        defaultSelectedKeys={[history.location.pathname]}>
        {
          menu.map(item => (
            <Menu.Item
              key={item.path}
              icon={<item.icon />}
              onClick={() => handleMenuItemClick(item.path)}>
              {item.text}
            </Menu.Item>
          ))
        }
      </Menu>
    </Sider>
  );
};

export default SideBar;
